<template>
  <div class="gather-container">
    <div style="width:100%;margin-top:40px;display:flex">
      <div class="gt-gather">
        <img :src="data.imageUrl" style="width:100%;height:100%;border-radius: 50% 50%;"/>
      </div>
      <div class="gt-info">
        <p style="text-align:left;font-size:26px;font-weight:600;margin:0px 0px 10px 0px">{{data.title}}</p>
        <div style="width:100%;float:left">
          <img :src="data.userImg" style="float:left;margin-right:15px" /> 
          <user class="u-text" :role=data.role>{{data.creater}}</user> 
          <span class="u-text">创建：{{data.create_time | parseTime('{y}-{m}-{d}')}}</span>
        </div>
        <div style="width:100%;float:left;margin:20px 0px">
          <div v-for="(item,index) in data.labels" :key=index>
            <el-tag type="danger" style='float:left;margin-right:15px'>#{{item}}</el-tag>
          </div>
        </div>
        <section style="width:100%;margin:20px 0px;float:left;text-align: left;width: 100%">
          <span style="font-size:13px">{{data.mark}}</span>
        </section>  
        <section style="width:100%;margin:20px 0px">
          <el-button style="float:left" type="danger" icon="el-icon-caret-right" @click="playAll">
            播放全部
          </el-button>
          <el-button 
            v-if="collect" 
            style="float:left" 
            icon="el-icon-star-off" 
            type="info" 
            @click="collectGather">已收藏</el-button>
          <el-button v-else 
            :disabled="user_name == data.creater"
            style="float:left" 
            icon="el-icon-star-off" 
            type="danger" 
            @click="collectGather">收藏</el-button> 

          <el-button style="float:left" icon="el-icon-share" type="danger" @click="shareGather($route.query.gid)">分享</el-button>      
        </section>  
      </div>
    </div>
    <p style="text-align:left; font-size:22px;font-weight:500">全部歌曲</p>
    <item-table ref="itable" class="gt-table"/>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { shareGather } from '@/api/event'
import { userCollectService, getUserCollectService } from '@/api/login'
import { getGather } from '@/api/music'
import { parseTime } from '@/utils/time'
import { error, success } from '@/utils/toast'
import { stringTime } from '@/utils/util'
import User from '@/components/User'
import ItemCtrl from '@/components/ItemCtrl'
import ItemTable from '@/components/ItemTable'

export default {
  // name: "gathers",
  components: {
    User,
    ItemCtrl,
    ItemTable,
  },  
  data() {
    return {
      data:{},
      collect:false,
    };
  },
  filters:{
    parseTime,
    stringTime,
  },
  mounted() {
    
  },
  computed:{
    ...mapGetters(['user_name', 'isGuest']),
  },
  async created() {
    await this.getCollect()
    this.getData()
  },
  methods: {
    shareGather,
    ...mapMutations(['setLoginDlg']),
    async collectGather() {
      if (this.isGuest) {
        this.setLoginDlg({visual:true, type:true})
        return
      }
      
      this.collect = !this.collect
      const o = {
        ctype:'G', 
        gid:+this.$route.query.gid
      }
      var resp = null
      if (this.collect) {
        o.op = "add"
        resp = await userCollectService(o)
      } else {
        o.op = "delete"
        resp = await userCollectService(o)
      }

      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      success("操作成功")
    },
    playAll(e) {
      // e.preventDefault()
      e.stopPropagation()
      this.$refs.itable.playAllItems(e)
    },
    selectRow(row, column) {
      this.dList.forEach(item => {
        if (item.fileid == row.fileid) {
          item.icon = true
        } else {
          item.icon = false
        }
      })
    },
    releaseRow() {
      this.dList.forEach(item => {
        item.icon = false
      })
    },
    async getData() {
      const resp = await getGather({gid:this.$route.query.gid})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.data = resp.data
      this.data.labels = this.data.label.split(",")
      this.data.userImg = "/mpi/usr/creater_image?username=" + this.data.creater;
      this.data.imageUrl = "/mpi/gather/image?gid=" + this.$route.query.gid;
      this.data.role = "superadmin"
      this.data.collect = false
    },
    async getCollect() {
      if (this.isGuest) {  // 非登录状态
        return
      }

      const resp = await getUserCollectService({ctype:'G'})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.collect = false
      resp.data.forEach(item => {
        if (item.gid == this.$route.query.gid) {
          this.collect = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tb-item {
    height:14px;
    width:100%;
    text-align: center;

    .tb-field {
      height:16px;
      line-height:16px;
      font-size:10px;
      color:#918f8f;
      margin:0 auto;
      display: block;
    }
  }

  .gather-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    // width: 100%;
    height: 100%;
    margin: 0 auto;
    width:1300px;
  }

  .gt-gather {
    width:100px;
    height:100px;
    margin-right:50px;
    margin-top:15px;
    float:left;
    border-radius: 50% 50%;
    box-shadow: 10px 5px 9px #4d4f50;
    // box-sizing:border-box;
    border-radius: 50% 50%;
    border:30px solid transparent;
    background-clip:padding-box,border-box;
    background-origin:padding-box,border-box;
    background-image:linear-gradient(45deg,#ebe4e4,#312d2d,#e2d6d6), linear-gradient(45deg,#978e8e,#060606,#7e7373);
    // linear-gradient(45deg,#686464,#060606,#535151);
  }

  .gt-info {
    width:calc(100% - 150px);
    img {
      width:40px;
      height:40px;
      background-repeat: no-repeat;
      background-size:100% 100%;
      border-radius: 50% 50%;
    }

    .u-text {
      float:left;
      font-size:13px;
      line-height: 40px;
      margin-right:10px;
    }
  }

  .gt-table {
    width:100%;
    margin-bottom:40px;
    display:inline-block;
  }

</style>